@import './utils/func';
@import './utils/var';


.g-container{
  overflow: hidden;
  @extend %full;
}

.g-main{
  overflow: hidden;
  position: relative;
  height: 100%;
  margin-right: 300px;
}

.g-right{
  overflow: hidden;
  position: absolute; top: 0; right: 0;
  width: 300px; height: 100%;
}

.g-nav{
  position: absolute; top: $g-top; right: $g-right;
  color: $text-gray1;
  white-space: nowrap;
  span{
    margin: 0 12px;
  }
  a.active, a.focus{
    color: $color-brown;
  }
}

.g-title{
  position: absolute; top: $g-top; left: $g-left;
  margin-top: -10px;
  color: $text-gray1;

  h3{
    font-size: 18px;
  }
  p{
    margin-top: -5px;
    text-transform: uppercase;
  }
}

.g-mao{
  box-sizing: border-box;
  position: absolute; bottom: $g-bottom; left: $g-left;
  width: 100%;

  img{
    width: 36px; height: 24px;
    margin-right: 2%;
    opacity: .89;
  }
}

.g-slogan{
  position: absolute; bottom: $g-bottom; right: $g-right;
}


.g-line{
  position: absolute;
  font-size: 0; line-height: 0;
  opacity: .6;

  &-h{
    top: 40%;
    left: $g-left; right: $g-right;
    height: 1px;
    background-color: $color-brown;
  }
  &-v{
    left: 32%; top: 0; bottom: 0;

    &::before, &::after{
      content: "";
      position: absolute; left: 0;
      width:1px;
      background-color: $color-brown;
    }
    &::before{
      top: 0;
      height: 36%;
    }
    &::after {
      bottom: 0;
      height: 56%;
    }
  }
}

.g-items{
  position: absolute; top: 40%; right: $g-right;
  width: 50%;

  &-box{
    width: 100%;
    margin-left: 10%;
  }

  .item{
    float: left;
    position: relative;
    width: 20%;
    &:before{
      content: "";
      position: absolute; top: -5px; left: 50%;
      height: 11px;
      border-right: 1px solid $color-brown;
      opacity: .6;
    }
    .icon{
      height: 40px;
      margin: -55px 0 35px;
      text-align: center;
    }
  }
}

@media screen and (max-width: 1280px) {
  .g-main {
    margin-right: 250px;
  }
  .g-right {
    width: 250px;
  }
}
